<div>
    <div nz-row [nzGutter]="[8, 8]">
        <div nz-col class="gutter-row" [nzSpan]="12">
            <nz-divider nzText="{{'common.source'|translate}}" nzOrientation="left"></nz-divider>
            <div nz-row [nzGutter]="[8, 8]">
                <div nz-col [nzSpan]="24">
                    <form nz-form>
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" [nzXs]="12">{{'common.datasource'|translate}}</nz-form-label>
                            <nz-form-control [nzSpan]="14" [nzXs]="12">
                                <nz-select [(ngModel)]="source.datasource" nzShowSearch nzAllowClear nzSize="small"
                                    style="width: 150px; margin-right: 8px;" name="sourceDatasource"
                                    (ngModelChange)="handlerSwitchSource(true)">
                                    <nz-option *ngFor="let detail of dataSources" [nzDisabled]="!detail.status"
                                        nzValue="{{detail.alias}}" nzLabel="{{detail.alias}}"></nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" [nzXs]="12">{{'common.database'|translate}}</nz-form-label>
                            <nz-form-control [nzSpan]="14" [nzXs]="12">
                                <nz-select [(ngModel)]="source.database" nzShowSearch nzAllowClear nzSize="small"
                                    style="width: 150px; margin-right: 8px;" name="sourceDatabase"
                                    (ngModelChange)="handlerSwitchDatabase(true)">
                                    <nz-option *ngFor="let detail of source.databases" nzValue="{{detail.name}}"
                                        nzLabel="{{detail.name}}"></nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" [nzXs]="12">{{'common.table'|translate}}</nz-form-label>
                            <nz-form-control [nzSpan]="14" [nzXs]="12">
                                <nz-select [(ngModel)]="source.table" nzShowSearch nzAllowClear nzSize="small"
                                    style="width: 150px; margin-right: 8px;" name="sourceTable" (ngModelChange)="handlerCheckTable()">
                                    <nz-option *ngFor="let detail of source.tables" nzValue="{{detail.name}}"
                                        nzLabel="{{detail.name}}"></nz-option>
                                </nz-select>
                                <i *ngIf="tableSizeInfo?.flag" nz-popover nzPopoverContent="{{'alert.table_grate_50'|translate}}" class="fa fa-question-circle f50"></i>
                            </nz-form-control>
                        </nz-form-item>
                    </form>
                </div>
            </div>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="12">
            <nz-divider nzText="{{'common.target'|translate}}" nzOrientation="left"></nz-divider>
            <div nz-row [nzGutter]="[8, 8]">
                <div nz-col [nzSpan]="24">
                    <form nz-form>
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" [nzXs]="12">{{'common.datasource'|translate}}</nz-form-label>
                            <nz-form-control [nzSpan]="14" [nzXs]="12">
                                <nz-select [(ngModel)]="target.datasource" nzShowSearch nzAllowClear nzSize="small"
                                    style="width: 150px; margin-right: 8px;" name="targetDatasource"
                                    (ngModelChange)="handlerSwitchSource(false)">
                                    <nz-option *ngFor="let detail of dataSources" [nzDisabled]="!detail.status"
                                        nzValue="{{detail.alias}}" nzLabel="{{detail.alias}}"></nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" [nzXs]="12">{{'common.database'|translate}}</nz-form-label>
                            <nz-form-control [nzSpan]="14" [nzXs]="12">
                                <nz-select [(ngModel)]="target.database" nzShowSearch nzAllowClear nzSize="small"
                                    style="width: 150px; margin-right: 8px;" name="targetDatabase"
                                    (ngModelChange)="handlerSwitchDatabase(false)">
                                    <nz-option *ngFor="let detail of target.databases" nzValue="{{detail.name}}"
                                        nzLabel="{{detail.name}}"></nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6" [nzXs]="12">{{'common.table'|translate}}</nz-form-label>
                            <nz-form-control [nzSpan]="14" [nzXs]="12">
                                <nz-select [(ngModel)]="target.table" nzShowSearch nzAllowClear nzSize="small"
                                    style="width: 150px; margin-right: 8px;" name="targetTable">
                                    <nz-option *ngFor="let detail of target.tables" nzValue="{{detail.name}}"
                                        nzLabel="{{detail.name}}"></nz-option>
                                </nz-select>
                            </nz-form-control>
                        </nz-form-item>
                    </form>
                </div>
            </div>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="24">
            <nz-divider nzText="{{'common.preview'|translate}}" nzOrientation="left"></nz-divider>
            <form nz-form>
                <nz-form-item *ngIf="source.datasource">
                    <nz-form-label [nzSpan]="6">
                        {{'common.datasource'|translate}}
                    </nz-form-label>
                    <nz-form-control [nzSpan]="14" [nzXs]="12">
                        <nz-timeline style="margin-top: 1px;">
                            <nz-timeline-item *ngIf="source.datasource">{{source.datasource}}</nz-timeline-item>
                            <nz-timeline-item *ngIf="target.datasource">{{target.datasource}}</nz-timeline-item>
                        </nz-timeline>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item *ngIf="source.database">
                    <nz-form-label [nzSpan]="6">
                        {{'common.database'|translate}}
                    </nz-form-label>
                    <nz-form-control [nzSpan]="14" [nzXs]="12">
                        <nz-timeline style="margin-top: 1px;">
                            <nz-timeline-item *ngIf="source.database">{{source.database}}</nz-timeline-item>
                            <nz-timeline-item *ngIf="target.database">{{target.database}}</nz-timeline-item>
                        </nz-timeline>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item *ngIf="source.table">
                    <nz-form-label [nzSpan]="6">
                        {{'common.table'|translate}}
                    </nz-form-label>
                    <nz-form-control [nzSpan]="14" [nzXs]="12">
                        <nz-timeline style="margin-top: 1px;">
                            <nz-timeline-item *ngIf="source.table">{{source.table}}</nz-timeline-item>
                            <nz-timeline-item *ngIf="target.table">{{target.table}}</nz-timeline-item>
                        </nz-timeline>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item *ngIf="source.datasource">
                    <button nz-button [nzLoading]="loading.button" nzType="primary" [disabled]="handlerValidate()" (click)="handlerMigrate()">{{'common.execute'|translate}}</button>
                </nz-form-item>
            </form>
        </div>
    </div>
</div>